<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Визитка frontend-dev & web-design</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <nav class="nav">
        <div class="container">
            <div class="nav-row">
                <a href="./index.html" class="logo"><strong>Freelancer</strong> SerGio Play</a>

                <button class="dark-mode-btn">
                    <img src="./img/icons/sun.svg" alt="Light mode" class="dark-mode-btn__icon">
                    <img src="./img/icons/moon.svg" alt="Dark mode" class="dark-mode-btn__icon">
                </button>

                <ul class="nav-list">
                    <li class="nav-list__item"><a href="./index.html" class="nav-list__link nav-list__link--active">Мои проекты</a></li>
                    <li class="nav-list__item"><a href="./skills.html" class="nav-list__link">Навыки</a></li>
                    <li class="nav-list__item"><a href="./contacts.html" class="nav-list__link">Контакты</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <header class="header">
        <div class="header__wrapper">
            <h1 class="header__title">
                <strong>Привет, моё имя <em>SerGio Play</em></strong><br>
                я frontend developer,
            </h1>
            <div class="header__text">
                <p>который постоянно учиться и создаёт.</p>
            </div>
            <a target="_blank" href="./CV.pdf" class="btn">Посмотреть CV</a>
        </div>
    </header>


    <main class="section">
        <div class="container">
            <h2 class="title-1">Мои проекты</h2>
            <ul class="projects">
                  <li class="project">
                    <a href="https://github.com/SerGioPlay01/weather_web_app">
                        <img src="https://github.com/SerGioPlay01/weather_web_app/blob/main/Weather-App.png?raw=true">
                        <h3 class="project__title">Weather web-app</h3>
                    </a>
                </li>
                  <li class="project">
                    <a href="https://www.galaxycinema.ru/">
                        <img src="./img/projects/screenshot.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Galaxy Cinema | Сайт для просмотра фильмов, с использоваением api.</h3>
                    </a>
                </li>
                     <li class="project">
                    <a href="https://github.com/SerGioPlay01/CosmoPlayer-web-player.git">
                        <img src="./img/projects/CosmoPlayer-web-player (2).png" alt="Project img" class="project__img">
                        <h3 class="project__title">CosmoPlayer-web-player для просмотра .webm</h3>
                    </a>
                </li>
                    <li class="project">
                    <a href="https://github.com/SerGioPlay01/password_generator.git">
                        <img src="./img/projects/Генератор-паролей.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Генератор паролей</h3>
                    </a>
                </li>
                  <li class="project">
                    <a href="https://github.com/SerGioPlay01/slider_for_website.git">
                        <img src="./img/projects/Example-work-slider-SerGio-Play-.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Адаптивный слайдер для веб-сайта</h3>
                    </a>
                </li>
                   <li class="project">
                    <a href="https://cozy-fox-560c80.netlify.app/">
                        <img src="./img/projects/site_parka.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Разработка сайта для городского парка</h3>
                    </a>
                </li>
                <li class="project">
                    <a href="">
                        <img src="./img/projects/Фильмотека.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Киносайт - Фильмотека</h3>
                    </a>
                </li>
                <li class="project">
                    <a href="./project-page.html">
                        <img src="./img/projects/tabs.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Вкладки для сайта</h3>
                    </a>
                </li>
                <li class="project">
                    <a href="https://vk.com/gorparkkor">
                        <img src="./img/projects/Кореновский-парк-культуры-и-отдыха.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Оформление сообщества во ВКонтакте</h3>
                    </a>
                </li>
                <li class="project">
                    <a href="https://timely-bonbon-a979fd.netlify.app/">
                        <img src="./img/projects/Document.png" alt="Project img" class="project__img">
                        <h3 class="project__title">Форма выбора переговорной</h3>
                    </a>
                </li>

               
            </ul>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer__wrapper">
                <ul class="social">
                    <li class="social__item"><a href="https://vk.com/sergio.play"><img src="./img/icons/vk.svg" alt="Link"></a></li>
                    <li class="social__item"><a href="https://www.instagram.com/_sergio_play"><img src="./img/icons/instagram.svg" alt="Link"></a></li>
                    <li class="social__item"><a href="https://twitter.com/_SerGio_Play_"><img src="./img/icons/twitter.svg" alt="Link"></a></li>
                    <li class="social__item"><a href="https://github.com/SerGioPlay01/My-Bio"><img src="./img/icons/gitHub.svg" alt="Link"></a></li>
                </ul>
                <div class="copyright">
                    <p>© 2023 SerGio Play - freelancer</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="./js/main.js"></script>

</body>
</html>
